<template>
  <div class="search-main">

    <el-scrollbar>
      <main-header>
      </main-header>
      <div style="width:100%">
        <div style="display: inline-block; vertical-align:top; position: absolute; left: calc(50% - 400px - 300px);">
          <NavLeft></NavLeft>
          <!-- <TagLeft></TagLeft> -->
        </div>
        <!-- 以下为搜索结果列表，10条/页 -->
        <div style="display: inline-block; width:800px; position: relative; left: calc(50% - 400px);">
          <router-view></router-view>
        </div>
      </div>

    </el-scrollbar>

  </div>

</template>

<script>
import MainHeader from '@/components/MainHeader.vue'
import NavLeft from '@/components/Search/NavLeft.vue'
//import TagLeft from '@/components/Search/TagLeft.vue'

export default {
  components: { MainHeader, NavLeft },
  props: {
    ResultSum: Number,
  },
  data() {
    return {
      loading: 1,
      SearchResult: [],
      searchInput: this.$route.query.keyword,
    }
  },
  methods: {
    //向服务器发送get请求，得到搜索结果
    async load() {
      this.loading = 1
    },
  },
  created() {
    this.load()
  },
  mounted() {
    this.load()
  },
}
</script>

<style scoped>
.search-main {
  /* background: url('../assets/blueink.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat; */
  height: 100%;
  width: 100%;
}

.el-pagination {
  margin-top: 30px;
  margin-bottom: 30px;
}

.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
}

:deep .el-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
  overflow-x: hidden !important;
}
</style>